<template>
  <div style="padding: 15px 20px 15px 5px">
    <div class="pre-text">{{ text }}</div>
    <vol-form ref="form" :labelWidth="80" :load-key="false" :formFields="options.fields"
      :formRules="options.formOptions">
    </vol-form>
    <div class="tables">
      <div class="table-item" v-for="(item, index) in options.tables" :key="index">
        <div class="table-header">
          <div class="header-text">
            {{ item.name }}
          </div>
          <div class="header-btns">
            <el-button type="primary" size="small" :key="bindex" plain @click="tableBtnClick(item, bindex, index)"
              :icon="btnItem.icon" v-for="(btnItem, bindex) in item.buttons">
              {{ btnItem.name }}
            </el-button>
          </div>
        </div>
        <vol-table :url="item.url" :load-key="false" :index="true" :ref="'table' + index" :tableData="item.tableData"
          :columns="item.columns" :max-height="250" :pagination-hide="item.pagination" :column-index="true"
          :ck="true"></vol-table>
      </div>
    </div>

    <div class="tables" style="padding-bottom: 10px">
      <el-tabs v-model="tabsModel" v-show="options.tabs.length" @tab-click="() => { }">
        <el-tab-pane style="padding: 0" class="table-item" v-for="(item, index) in options.tabs" :label="item.name"
          :name="index" :key="index">
          <div class="table-header">
            <div class="header-text">
              {{ item.name }}
            </div>
            <div class="header-btns">
              <el-button type="primary" size="small" :key="bindex" :icon="btnItem.icon" plain
                @click="tabsTableBtnClick(item, bindex, index)" v-for="(btnItem, bindex) in item.buttons">
                {{ btnItem.name }}
              </el-button>
            </div>
          </div>
          <vol-table :url="item.url" :load-key="false" :index="true" :ref="'tabsTable' + index"
            :tableData="item.tableData" :columns="item.columns" :max-height="250" :pagination-hide="item.pagination"
            :column-index="true" :ck="true"></vol-table>
        </el-tab-pane>
      </el-tabs>
    </div>

    <div class="form-btns">
      <el-button type="primary" @click="submit" size="small">提交</el-button>
      <el-button type="primary" @click="reset" plain size="small">重置</el-button>
      <el-button type="primary" @click="download" plain size="small">下载代码</el-button>
    </div>
  </div>
</template>

<script>
import VolTable from "./../VolTable";
import VolBox from "./../VolBox";
import VolForm from "./../VolForm";
import downloadForm from "./DownloadForm";
export default {
  props: {
    options: {
      type: Object,
      default: () => {
        return { fields: {}, formOptions: [], tables: [], tabs: [] };
      },
    },
  },
  data() {
    return {
      text: "",
      tabsModel: 0,
    };
  },
  created() { },
  methods: {
    tableBtnClick(item, btnIndex, index) {
      if (item.buttons[btnIndex].value == "add") {
        this.$refs["table" + index].addRow({});
        return;
      }
      if (item.buttons[btnIndex].value == "del") {
        this.$refs["table" + index].delRow();
        return;
      }
    },
    tabsTableBtnClick(item, btnIndex, index) {
      if (item.buttons[btnIndex].value == "add") {
        this.$refs["tabsTable" + index].addRow({});
        return;
      }
      if (item.buttons[btnIndex].value == "del") {
        this.$refs["tabsTable" + index].delRow();
        return;
      }
    },
    submit() { },
    reset() {
      this.$refs.form.reset();
      this.$message.success("表单已重置");
    },
    download() {
      downloadForm.call(this);
    },
  },
  components: {
    "vol-table": VolTable,
    "vol-box": VolBox,
    "vol-form": VolForm,
  },
};

VolForm;
</script>
<style lang="less" scoped>
.form-btns {
  text-align: center;
}

.tables {
  padding-left: 15px;

  .table-item {
    padding: 10px;
  }

  .table-header {
    display: flex;
    margin-bottom: 8px;
  }

  .header-text {
    position: relative;
    bottom: -9px;
    flex: 1;
    font-weight: bold;
  }

  .header-btns {
    text-align: right;
  }
}
</style>